// 项目要响应式，兼容window和安卓内核 这是一个pc端项目（在1080X1920屏幕上运行）
// ** 用ts来写js代码 so,尽情的是使用js新语法，不必考虑兼容性问题
function autoRootFontSize() {
  document.documentElement.style.fontSize =
    (Math.min(
      screen.width,
      document.documentElement.getBoundingClientRect().width
    ) /
      1080) *
      100 +
    'px'
  // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
}
window.addEventListener('resize', autoRootFontSize)
autoRootFontSize()

function goPage(pageName: string) {
  window.location.href = `./${pageName}.html`
}

function backIndex() {
  // 如果服务器打开的是item30，就跳转到上一页
  if (location.pathname === '/item30.html') {
    window.history.back()
  } else {
    window.location.href = './index.html'
  }
}

// swiper初始化前初始化弹框的html结构的事件
function initBigImg() {
  document.body.innerHTML += `
  <div class="bigImg" onclick="isHide()">
    <img src="" alt="" />
  </div>
  `
}

// 点击swiper图片触发的事件
function imagePreview(target: any, callback: any) {
  if (!document.querySelector('.bigImg img')) {
    document.body.innerHTML += `
    <div class="bigImg" onclick="isHide()">
      <img src="" alt="" />
    </div>
    `
  }
  // 如果已经创建了，直接修改src图片路径
  let bigImg = document.querySelector('.bigImg') as HTMLElement
  let Img = document.querySelector('.bigImg img') as HTMLElement
  bigImg.style.display = 'block'
  Img.src = target.src
  // console.dir(Img.src)
  bigImg.style.zIndex = '999'
  if (!document.querySelector('.bigImg img')) {
    callback && callback()
  }
  // 阻止触发父元素上的点击事件
  event.stopPropagation()
}

// 点击弹框图片触发的事件
function isHide() {
  let That = document.querySelector('.bigImg img') as HTMLElement
  let bigImg = document.querySelector('.bigImg') as HTMLElement
  if (That.hidden) {
    bigImg.style.display = 'block'
    bigImg.style.zIndex = '999'
  } else {
    bigImg.style.display = 'none'
    bigImg.style.zIndex = '-1'
  }
}

interface videoConfig {
  url: string
  pic: string
}
function videoConfigFn(obj: videoConfig) {
  const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    hotkey: false,
    loop: true,
    // volume: 0.5,
    video: {
      url: obj.url,
      pic: obj.pic
    }
  })
  let controller = document.querySelector('.dplayer-controller') as HTMLElement
  let controllerMask = document.querySelector(
    '.dplayer-controller-mask'
  ) as HTMLElement
  let leftBtn = document.querySelector('.btn .left-btn') as HTMLElement
  let rightBtn = document.querySelector('.btn .right-btn') as HTMLElement
  // 隐藏控制栏
  controller.style.display = 'none'
  controllerMask.style.display = 'none'
  // 静音 muted属性控制开始播放时需要不需要声音
  dp.video.muted = true
  // 自动播放
  dp.video.autoplay = 'autoplay'
  // 播放 和 暂停
  leftBtn.onclick = () => {
    dp.video.muted = false
    dp.play()
  }
  rightBtn.onclick = () => {
    dp.pause()
  }
  // 模拟全屏
}
